<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Pricing</title>
	<link rel="icon" href="${request.contextPath}/static/img/favicon.ico" type="image/x-icon"/>
	<link rel="shortcut icon" href="${request.contextPath} /static/img/favicon.ico" type="image/x-icon"/>
	<link rel="stylesheet" href="${request.contextPath}/static/css/reset.css">
	<link rel="stylesheet" href="${request.contextPath}/static/css/ins/common.css">
	<#if isMobile == false>
		<link rel="stylesheet" href="${request.contextPath}/static/css/pricing.css">
    <#else>
		<link rel="stylesheet" href="${request.contextPath}/static/css/mobile/pricing.css">
    </#if>
    <#include "../component/facebookPixel.ftl">
</head>
<body>
<#include "../header_new1.ftl">
<main>
    <#if isMobile == false>
		<section>
			<div class="container">
				<h1>Pricing & Plans</h1>
			</div>
		</section>
    <#else>
		<section>
			<div class="container">
				<div class="pricing-tab">
					<div class="tab-item is-active" data-tab="0">SINGLE</div>
					<div class="tab-item" data-tab="0">PLUS</div>
					<div class="tab-item" data-tab="1">ADVANCED</div>
					<div class="tab-item" data-tab="2">PRO</div>
				</div>
			</div>
		</section>
    </#if>
	<section>
		<div class="container">
			<div class="version-list">
                <#list versionProduct as version>
	                <div class="version-item">
                        <#if version_index != 0>
			                <div class="title">${version.name}</div>
                        <#else>
			                <div class="title">SINGLE</div>
                        </#if>
		                <div class="sub-title">
                            <#if version.id == 5>
				                <div class="feature">Analytics Report</div>
				                <p>Use to review report of single influencer, product or brand.</p>
                            <#elseif version.id == 2>
				                <div class="feature">Hot Elements</div>
				                <p>Enhance the content creation and account operation skills.</p>
                            <#elseif version.id == 3>
				                <div class="feature">Influencer Discovery</div>
				                <p>Dedicate to influencer search and e-shop products search.</p>
                            <#else>
				                <div class="feature">Brand Analysis</div>
				                <p>Focus on brands analytics</p>
                            </#if>
		                </div>
		                <p class="product-price">
			                <span class="price-sign">$</span>
			                <span class="data">
				                <#if version_index == 0>
				                    ${reportProduct[0].price / 10}
				                <#else>
                                    ${version.price}
				                </#if>
			                </span>
			                <span class="last">/
				                <#if version_index == 0>
					                Report
                                <#else>
					                Month
                                </#if>
			                </span>
		                </p>
                        <#if login == false>
			                <button class="gd-btn btn-info">PURCHASE</button>
                        <#else>
	                        <#if version_index == 0>
		                        <button class="gd-btn btn-info" data-version="${reportProduct[0].id}">PURCHASE</button>
                            <#else>
                                <#if version.level == user.roleId>
		                            <button class="gd-btn btn-info" data-version="${version.id}">RENEW</button>
                                <#elseif version.level gt user.roleId>
		                            <button class="gd-btn btn-info" data-version="${version.id}">UPGRADE</button>
                                <#elseif version.level lt user.roleId>
		                            <button disabled class="gd-btn btn-default">NOT DEGRADABLE</button>
                                </#if>
	                        </#if>
                        </#if>
	                </div>
                </#list>
                <#--<#if isMobile == true>
					<div class="wrapper pay-wrap">
                        <#if login != false>
							<div id="paypal-btn" class="gd-btn"></div>
                        <#else>
							<a href="javascript:;" onclick="toLogin()">
								<button class="gd-btn btn-info">Get Started</button>
							</a>
                        </#if>
					</div>
                </#if>-->
			</div>
            <#--<#if isMobile == false>
				<div class="pay-wrap">
                    <#if login != false>
						<div id="paypal-btn" class="gd-btn"></div>
                    <#else>
						<a href="javascript:;" onclick="toLogin()">
							<button class="gd-btn btn-info">Get Started</button>
						</a>
                    </#if>
				</div>
            </#if>-->
		</div>
	</section>
	<section>
		<div class="container compare-wrap">
            <#if isMobile == false>
				<h2>Full Plan Comparison</h2>
				<table class="pricing-table">
					<thead>
						<tr>
							<th>Features</th>
							<th>SINGLE</th>
							<th>ADVANCED</th>
							<th>PRO</th>
						</tr>
					</thead>
					<tbody>
					<tr class="sub-title">
						<td colspan="4">Analytics Report</td>
					</tr>
					<tr>
						<td>Reports included</td>
						<td>1/credit</td>
						<td>50/day</td>
						<td>100/day</td>
					</tr>
					<tr>
						<td>Valid period</td>
						<td>30 days</td>
						<td>24 hours</td>
						<td>24 hours</td>
					</tr>
					<tr>
						<td>Basic info</td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
					</tr>
					<tr>
						<td>Account performance</td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
					</tr>
					<tr>
						<td>Audience demographic</td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
					</tr>
					<tr>
						<td>Ad performance</td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
					</tr>
					<tr class="sub-title">
						<td colspan="4">Influencer Search</td>
					</tr>
					<tr>
						<td>Search result</td>
						<td>Top 10</td>
						<td>Top 500</td>
						<td>Top 1000</td>
					</tr>
					<tr>
						<td>Keyword search</td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
					</tr>
					<tr>
						<td>Influencer category filter</td>
						<td><i class="iconfont iconbuzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
					</tr>
					<tr>
						<td>Influencer information filter</td>
						<td><i class="iconfont iconbuzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
					</tr>
					<tr>
						<td>Influencer data filter</td>
						<td><i class="iconfont iconbuzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
					</tr>
					<tr>
						<td>Influencer audience filter</td>
						<td><i class="iconfont iconbuzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
						<td><i class="iconfont iconzhichi"></i></td>
					</tr>
					<tr class="sub-title">
						<td colspan="4">Influencer Leaderboard</td>
					</tr>
					<tr>
						<td>Comprehensive ranking</td>
						<td>Top 30</td>
						<td>Top 500</td>
						<td>Top 1000</td>
					</tr>
					<tr>
						<td>Follower growth ranking</td>
						<td>Top 30</td>
						<td>Top 500</td>
						<td>Top 1000</td>
					</tr>
					</tbody>
				</table>
            <#else>
				<h2>Full Plan Comparison</h2>
				<div class="table-wrap">
					<table class="pricing-table">
						<thead>
							<tr>
								<th>SINGLE</th>
								<th>ADVANCED</th>
								<th>PRO</th>
							</tr>
						</thead>
						<tbody>
						<tr class="title" data-row="1" onclick="troggleDetail(this)">
							<td colspan="3">
								<div class="td-row">
									<div class="left">Analytics Report</div>
									<div class="right">
										<i class="iconfont iconbofang-copy"></i>
									</div>
								</div>
							</td>
						</tr>
						<tr class="tr-1">
							<td colspan="3" class="sub-title">Reports included</td>
						</tr>
						<tr class="tr-1">
							<td>1/credit</td>
							<td>50/day</td>
							<td>100/day</td>
						</tr>
						<tr class="tr-1">
							<td colspan="3" class="sub-title">Valid period</td>
						</tr>
						<tr class="tr-1">
							<td>30 days</td>
							<td>24 hours</td>
							<td>24 hours</td>
						</tr>
						<tr class="tr-1">
							<td colspan="3" class="sub-title">Basic info</td>
						</tr>
						<tr class="tr-1">
							<td><i class="iconfont iconzhichi"></i></td>
							<td><i class="iconfont iconzhichi"></i></td>
							<td><i class="iconfont iconzhichi"></i></td>
						</tr>
						<tr class="tr-1">
							<td colspan="3" class="sub-title">Account performance</td>
						</tr>
						<tr class="tr-1">
							<td><i class="iconfont iconzhichi"></i></td>
							<td><i class="iconfont iconzhichi"></i></td>
							<td><i class="iconfont iconzhichi"></i></td>
						</tr>
						<tr class="tr-1">
							<td colspan="3" class="sub-title">Audience demographic</td>
						</tr>
						<tr class="tr-1">
							<td><i class="iconfont iconzhichi"></i></td>
							<td><i class="iconfont iconzhichi"></i></td>
							<td><i class="iconfont iconzhichi"></i></td>
						</tr>
						<tr class="tr-1">
							<td colspan="3" class="sub-title">Ad performance</td>
						</tr>
						<tr class="tr-1">
							<td><i class="iconfont iconzhichi"></i></td>
							<td><i class="iconfont iconzhichi"></i></td>
							<td><i class="iconfont iconzhichi"></i></td>
						</tr>
						<tr class="title" data-row="2" onclick="troggleDetail(this)">
							<td colspan="3">
								<div class="td-row">
									<div class="left">Influencer Search</div>
									<div class="right">
										<i class="iconfont iconbofang-copy"></i>
									</div>
								</div>
							</td>
						</tr>
						<tr class="tr-2">
							<td colspan="3" class="sub-title">Search result</td>
						</tr>
						<tr class="tr-2">
							<td>Top 10</td>
							<td>Top 500</td>
							<td>Top 1000</td>
						</tr>
						<tr class="tr-2">
							<td colspan="3" class="sub-title">Keyword search</td>
						</tr>
						<tr class="tr-2">
							<td><i class="iconfont iconzhichi"></i></td>
							<td><i class="iconfont iconzhichi"></i></td>
							<td><i class="iconfont iconzhichi"></i></td>
						</tr>
						<tr class="tr-2">
							<td colspan="3" class="sub-title">Influencer category filter</td>
						</tr>
						<tr class="tr-2">
							<td><i class="iconfont iconbuzhichi"></i></td>
							<td><i class="iconfont iconzhichi"></i></td>
							<td><i class="iconfont iconzhichi"></i></td>
						</tr>
						<tr class="tr-2">
							<td colspan="3" class="sub-title">Influencer information filter</td>
						</tr>
						<tr class="tr-2">
							<td><i class="iconfont iconbuzhichi"></i></td>
							<td><i class="iconfont iconzhichi"></i></td>
							<td><i class="iconfont iconzhichi"></i></td>
						</tr>
						<tr class="tr-2">
							<td colspan="3" class="sub-title">Influencer data filter</td>
						</tr>
						<tr class="tr-2">
							<td><i class="iconfont iconbuzhichi"></i></td>
							<td><i class="iconfont iconzhichi"></i></td>
							<td><i class="iconfont iconzhichi"></i></td>
						</tr>
						<tr class="tr-2">
							<td colspan="3" class="sub-title">Influencer audience filter</td>
						</tr>
						<tr class="tr-2">
							<td><i class="iconfont iconbuzhichi"></i></td>
							<td><i class="iconfont iconzhichi"></i></td>
							<td><i class="iconfont iconzhichi"></i></td>
						</tr>
						<tr class="title" data-row="3" onclick="troggleDetail(this)">
							<td colspan="3">
								<div class="td-row">
									<div class="left">Influencer Leaderboard</div>
									<div class="right">
										<i class="iconfont iconbofang-copy"></i>
									</div>
								</div>
							</td>
						</tr>
						<tr class="tr-3">
							<td colspan="3" class="sub-title">Comprehensive ranking</td>
						</tr>
						<tr class="tr-3">
							<td>Top 30</td>
							<td>Top 500</td>
							<td>Top 1000</td>
						</tr>
						<tr class="tr-3">
							<td colspan="3" class="sub-title">Follower growth ranking</td>
						</tr>
						<tr class="tr-3">
							<td>Top 30</td>
							<td>Top 500</td>
							<td>Top 1000</td>
						</tr>
						</tbody>
					</table>
				</div>
            </#if>
		</div>
	</section>
</main>
<#if isMobile == false>
    <#include "../footer_new.ftl">
</#if>
<script type="module">
	import { troggleActive } from "/static/js/common.js";

    const comparisionData = [
		{
		    title: 'Features',
			data: [ 'SINGLE', 'PLUS', 'ADVANCED', 'PRO']
		},
		{
		    title: ''
		}
	]
	initPricing()
	function initPricing() {
        initPricingEvent()
	}

	function initPricingEvent () {
		document.querySelectorAll('.version-item .btn-info').forEach(item => {
		    item.addEventListener('click', () => {
		        if(gugeeGobal.isLogin) {
					const id = item.getAttribute('data-version')
			        window.location.href = '/pricing/' + id
		        } else {
		            toLogin()
		        }
		    })
		})
		if(gugeeGobal.isMobile) {
		    document.querySelectorAll('.pricing-tab .tab-item').forEach((item, i) => {
		        item.addEventListener('click', () => {
		            troggleActive(item)
                    const versionItems = document.querySelectorAll('.version-list .version-item')
                    versionItems.forEach(item => {
                        item.hide()
                    })
                    versionItems[i].show()
		        })
		    })
		}
	}
</script>
</body>
</html>